<template>
  <div class="header_box">
    <div class="header_title">叩丁狼商品管理系统</div>
    <!-- 图标按钮 -->
    <div class="icon_btn">
      <i class="el-icon-menu" @click="toggleMenu"></i>
    </div>
    <div class="header_right">
      <el-row class="block-col-12">
        <el-col :span="50">
          <el-dropdown trigger="click" placement="top-start">
            <span class="el-dropdown-link">
              admin<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @command="loginOutFn">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {
    loginOutFn() {
      // console.log(123);
    },
    toggleMenu(){
      console.log(123);
      this.$store.commit("changeCollapse")
    }
  },
};
</script>
 
<style lang = "less" scoped>
.header_box {
  color: #fff;
  position: relative;
  .header_title {
    padding: 0 15px;
    line-height: 70px;
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .icon_btn {
    position: absolute;
    top: 0;
    left: 225px;
    line-height: 70px;
    font-size: 20px;
  }
  .header_right {
    position: absolute;
    top: 0;
    right: 20px;
    line-height: 70px;
    color: #fff;
    span {
      color: #fff;
    }
  }
}
</style>